<template>
	<div class="less_topic">
		<img class="content_background" :src="contentBackground" alt="" />
		<div class="topic_top">
			<img :src="topBack" alt="" />
		</div>
		<div class="topic_con" :class="{nopadding:type=='readactual'||type=='scene'}">
			<!-- 阅读广度 -->
			<readspan v-if="type=='readspan'"></readspan>
			<!-- 阅读实战 -->
			<readactual v-if="type=='readactual'"></readactual>
			<!-- 情景再现 -->
			<scene v-if="type=='scene'" @showmask="showmask" @switchbutton="switchbutton"></scene>
			<quantityliteracy v-if="type=='quantityliteracy'"></quantityliteracy>
			<div class="submit" v-if="type=='scene'&&submitflag">
				<img src="../../assets/image/lesson/hand3.png" alt="">
			</div>
		</div>
		<div class="topic_answer" @click="toAnswerList">
			<img src="../../assets/image/lesson/answer.png" alt="" style="width: 100%; height: 100%;">
		</div>
		<div class="kefu_box">
			<kefu :letters="letters"></kefu>
			<div class="countdown">
				<div :style="{ width: countNum }"></div>
			</div>
		</div>
		<div class="topic_mask" v-if="maskflag"></div>
	</div>
</template>

<script>
	import readspan from '../../components/guide/readspan.vue' //阅读广度
	import readactual from '../../components/guide/readactual.vue' //阅读实战
	import scene from '../../components/guide/scene.vue' //情景再现
	import quantityliteracy from '../../components/guide/quantityliteracy.vue' //情景再现
	import kefu from '../../components/kefu/index.vue'
	import AnimWord from '../../components/animWord'
	export default {
		name: "lessTopic",
		components: {
			kefu,
			readspan,
			readactual,
			scene,
			quantityliteracy
		},
		data() {
			return {
				submitflag: false,
				maskflag: false,
				topBack: '',
				contentBackground: '',
				type: '',
				letters: '',
				countNum: '10%',
				// 阅读广度文字提示时间
				lessTopicTime: null,
				// 数量 默认1
				limit: 1,

			};
		},
		mounted() {
			this.type = this.$route.query.class;
			this.getbg();
		},

		methods: {
			switchbutton(str) {
				this.submitflag = str
			},
			showmask() {
				this.maskflag = true
			},
			// 返回上一页
			headReturn() {
				this.$router.go(-1);
			},
			toAnswerList() {
				if (this.type == "readspan") {
					this.$router.push({
						path: "/answerList"
					});
				} else {
					this.$router.push({
						path: "/lessonAnswer",
						query: {
							type: this.type
						},
					});
				}
			},
			getbg() {
				this.contentBackground = this.$imgData[this.type].contentBackground
				this.topBack = this.$imgData[this.type].topBack
				this.letters =  this.$imgData[this.type].letters
				return
				// if (this.type == "readspan") {
				// 	//阅读广度
				// 	this.contentBackground = contentBackground1;
				// 	this.topBack = topbBack1;
				// 	this.letters = "请认真看习题演示哦，倒计时结束自动进入答题页";
				// 	return;
				// }
				// if (this.type == "wordlogic") {
				// 	//概括力
				// 	this.contentBackground = contentBackground2;
				// 	this.topBack = topbBack2;
				// 	this.letters =
				// 		"请在下方的词组里找出不同类的词语，再概括下同类词组，下面先给大家做个习题演示吧";
				// 	return;
				// }
				// if (this.type == "readactual") {
				// 	//阅读实战
				// 	this.contentBackground = contentBackground3;
				// 	this.topBack = topbBack3;
				// 	this.letters = "请认真阅读文章，点击答题后进入答题模式";
				// 	return;
				// }
				// if (this.type == "scene") {
				// 	//阅读实战
				// 	this.contentBackground = contentBackground15;
				// 	this.topBack = topbBack15;
				// 	this.letters =
				// 		"请认真阅读屏幕中的文章，并根据文章中的故事选出相应的图片进行情景再现";
				// 	return;
				// }
				// if (this.type == "quantityliteracy") {
				// 	//阅读实战
				// 	this.contentBackground = contentBackground4;
				// 	this.topBack = topbBack4;
				// 	this.letters = "请在选项内选出可与题目中的汉字组词的字，所组的词显示在汉字右边的横线上，注意调整字的顺序。例如：大 ";
				// 	return;
				// }
			},

		},
	};
</script>

<style lang="less" scoped>
	.less_topic {
		position: relative;
		height: 100vh;
		font-size: 0.16rem;
		color: #fff;
		overflow: hidden;
		// background: url("../../assets/image/lesson/lesback.png") no-repeat;
		background-size: 100% 100%;

		.content_background {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			// z-index: -1;
		}

		.head_return {
			position: absolute;
			top: 0.3rem;
			left: 0.4rem;
			width: 0.7rem;
			height: 0.7rem;
			background: url("../../assets/image/lesson/return.png") no-repeat;
			background-size: 100% 100%;
			cursor: pointer;

			&>img {
				width: 100%;
				height: 100%;
			}
		}

		.topic_top {
			position: relative;
			margin: -0.4rem auto 0 42%;
			width: 3.66rem;
			height: 2.06rem;

			// background: url("../../assets/image/lesson/breadth.png") no-repeat;
			// background-size: 88% 100%;
			&>img {
				width: 88%;
				height: 100%;
				display: block;
			}
		}

		.topic_con {
			padding: 0.4rem 1.1rem 0.4rem 1.3rem;
			position: relative;
			margin: 0.2rem auto 0 auto;
			width: 10.38rem;
			height: 6rem;
			color: #5175df;
			box-sizing: border-box;
			z-index: 3;
			background: url("../../assets/image/lesson/border.png") no-repeat;
			background-size: 100% 100%;

			.topic_con_scroll {
				// padding-right: .4rem;
				overflow-y: scroll;
				height: 100%;

				//火狐浏览器隐藏滚动条
				& {
					scrollbar-color: #9eb0e6 transparent;
					scrollbar-width: thin;
					scrollbar-track-color: transparent;
					-ms-scrollbar-track-color: transparent;
				}

				/* 设置滚动条的样式 谷歌  */

				&::-webkit-scrollbar {
					width: 12px;
				}

				/* 滚动槽 */

				&::-webkit-scrollbar-track {
					-webkit-box-shadow: inset006pxrgba(223, 224, 229);
					border-radius: 10px;
				}

				/* 滚动条滑块 */

				&::-webkit-scrollbar-thumb {
					border-radius: 10px;
					background: rgba(158, 176, 230);
					-webkit-box-shadow: inset006pxrgba(158, 176, 230);
				}

				&::-webkit-scrollbar-thumb:window-inactive {
					background: rgba(229, 226, 217);
				}

				.topic_item {
					.topic_item_t {
						width: 0.7rem;
						height: 0.3rem;
						line-height: 0.3rem;
						text-align: center;
						background: #dce6ff;
						border-radius: 6px 18px 18px 18px;
					}

					.topic_item_p {
						padding-left: 0.6rem;
						font-size: 0.21rem;
						line-height: 0.64rem;
						color: #373737;
					}
				}
			}
		}

		.topic_answer {
			margin: 0 auto;
			margin-top: 0.53rem;
			width: 1.93rem;
			height: 0.7rem;
			cursor: pointer;
			position: relative;
			z-index: 5;
		}
	}

	.kefu_box {
		width: 2.09rem;
		position: fixed;
		bottom: 1.24rem;
		right: 1.7rem;

		.countdown {
			width: 2.49rem;
			height: 0.62rem;
			position: absolute;
			bottom: 0.34rem;
			left: 50%;
			transform: translateX(-50%);
			background-image: url(../../assets/image/lesson/qujishidi.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;

			&>div {
				position: absolute;
				left: 0;
				top: 0;
				height: 0.62rem;
				background-image: url(../../assets/image/lesson/qujishi.png);
				background-size: 2.49rem 0.62rem;
				background-repeat: no-repeat;
			}
		}
	}

	.nopadding {
		padding: 0 !important;
	}

	.topic_mask {
		position: absolute;
		background: black;
		top: 0;
		left: 0;
		opacity: 0.8;
		width: 100%;
		height: 100%;
	}

	// 提交
	.submit {
		position: absolute;
		left: 50%;
		bottom: -0.3rem;
		transform: translateX(-50%);
		width: 2rem;
		height: 0.8rem;
		background: url("../../assets/image/lesson/submit.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;

		&>img {
			width: 0.81rem;
			height: 0.94rem;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: -0.85rem;
		}
	}
</style>
